<template>
  <div>
    <!-- ref 是 Vue 框架封装的属性，可以用于快速获取 DOM 节点 -->
    <h1 id="hi" ref="myH">我是一个孤独可怜又能吃的标签</h1>
    <Demo ref="de"></Demo>
  </div>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  components: {
    Demo
  },
  // 组件挂载 DOM 完毕后
  mounted() {
    // 两种写法都能获取到 DOM 结构
    console.log(document.querySelector("#hi"));
    console.log(this.$refs.myH);

    // 获取组件对象 - 可以为所欲为操作组件
    console.log(this.$refs.de);
    this.$refs.de.fn()
  },
};
</script>

<style>
</style>